<template>
  <div class="boxs">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <template #header>
        <!-- 自己封装的工具栏组件 -->
        <!-- <ElTools> -->
        <!-- <el-tools> -->
        <PageTools>
          <template #left>
            <span>总记录数：100条</span>
          </template>
          <template #right>
            <el-button type="warning" @click="importExcel">导入excle</el-button>
            <el-button type="danger">导出excle</el-button>
            <el-button type="primary" @click="show = true">新增员工</el-button>
          </template>
        </PageTools>
        <!-- </el-tools> -->
        <!-- </ElTools> -->
      </template>
      <!-- card body -->
      <!-- table列表 -->
      <!-- table列表 -->
      <!--
        1. 通过 Table 的default-sort属性设置默认的排序列和排序顺序
          说明：{prop: '指定按某一列进行排序', order: 'descending'}
        2. 排序方式：ascending 升序（从小到大）   descending 降序（从大到小）

        3.  el-table-column组件身上添加 sortable属性 开启了自排序（手动）
        说明：:sortable="true" = sortable

        关于数据排序：
        1. 前端排序=》假排序（拿到部分数据进行排序）
        2. 后端排序 =》真排序（使用全部数据排序）
        -->
      <el-table
        border
        :data="list"
        :default-sort="{ prop: 'timeOfEntry', order: 'ascending' }"
      >
        <el-table-column type="index" label="序号" />
        <el-table-column prop="username" label="姓名" />
        <el-table-column :sortable="true" prop="workNumber" label="工号" />
        <el-table-column prop="formOfEmployment" label="聘用形式">
          <template #default="{ row }">
            {{ formatEmploy(row.formOfEmployment) }}
          </template>
        </el-table-column>
        <el-table-column prop="departmentName" label="部门" />
        <el-table-column sortable prop="timeOfEntry" label="入职时间">
          <template #default="{ row }">
            {{ formatTime(row.timeOfEntry) }}
          </template>
        </el-table-column>
        <el-table-column label="账户状态">
          <template #default="{ row }">
            <el-switch v-model="row.mg" />
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="280">
          <template>
            <el-button type="text" size="small">查看</el-button>
            <el-button type="text" size="small">分配角色</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          background
          :total="total"
          :current-page="query.page"
          :page-size="query.size"
          :page-sizes="[10, 2]"
          layout="prev, pager, next, sizes"
          @current-change="changePage"
          @size-change="sizeChange"
        />
      </el-row>
    </el-card>

    <!-- 新增员工弹层 -->
    <add-employ :show="show" @close="show = false" />
  </div>
</template>

<script>
// import ElTools from '@/components/PageTools'
import { getEmployeeListApi } from '@/api/employees'
import dayjs from 'dayjs'
// 1. 导入数据字典
import Types from '@/api/constant/employees'
import AddEmploy from './components/add-employee.vue'
export default {
  components: {
    // 局部注册
    // ElTools
    AddEmploy
  },
  data() {
    return {
      show: false,
      // 2. 存储数据字典
      Types,
      // 员工列表数据
      list: [],
      query: {
        page: 1, // 当前页
        size: 10 // 每页条数
      },
      total: 0 // 总数
    }
  },
  mounted() {
    this.getEmployeeList()
  },
  methods: {
    formatTime(timeOfEntry) {
      return dayjs(timeOfEntry).format('YYYY-MM-DD')
    },
    // 格式化聘用形式
    /**
     * type 1 代表正式员工  2 代表非正式员工
     */
    formatEmploy(type) {
      // console.log('数据字典：', this.Types.hireType, type)
      /**
       * 需求：怎么根据type从数据字典[
            {
              id: 1,
              value: '正式'
            },
            {
              id: 2,
              value: '非正式'
            }
          ]
          获取对应ID的value值

          算法思路：
          1. 根据数据字典生成map=》映射关系
          2. 根据map结合type获取value值
       */
      // map = {1:"正式", 2:"非正式"}
      const map = {}
      this.Types.hireType.forEach(item => {
        // 1.数据id作为属性名 2.数据的value作为值
        map[item.id] = item.value
      })
      // console.log('映射关系：', map, type)

      return map[type]
    },
    // 页码切换
    changePage(newPage) {
      this.query.page = newPage
      this.getEmployeeList()
    },

    // 每页显示条数切换
    sizeChange(size) {
      this.query.size = size
      this.getEmployeeList()
    },
    // 获取员工列表
    async getEmployeeList() {
      const data = await getEmployeeListApi(this.query)
      const { total, rows } = data
      this.total = total
      this.list = rows
    },
    importExcel() {
      this.$yuntian()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
